<template>
  <div>
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
      <el-form-item :label="$t('数据坐标')">
        <l-radio
          v-model="config.dataType"
          :options="[
            { value: 'Y', label: 'Y轴' },
            { value: 'X', label: 'X轴' },
          ]"
        ></l-radio>
      </el-form-item>
      <el-form-item :label="$t('数据源')">
        <l-select
          v-model="config.dataCode"
          placeholder="please select数据源"
          size="mini"
          :options="lr_dataSource"
          labelKey="f_Name"
          valueKey="f_Code"
          filterable
          @change="handleDataSourceChange"
        >
        </l-select>
      </el-form-item>
      <el-form-item :label="$t('X轴值')">
        <l-select
          v-model="config.XKey"
          placeholder="please select"
          size="mini"
          :options="myColNameList"
          filterable
        >
        </l-select>
      </el-form-item>
      <el-form-item :label="$t('Y轴值')">
        <l-select
          v-model="config.YKey"
          placeholder="please select"
          size="mini"
          :options="myColNameList"
          filterable
        >
        </l-select>
      </el-form-item>
    </el-collapse-item>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {};
  },
  computed: {
    config() {
      return this.data;
    },
    myColNameList() {
      if (this.lr_dataSourceCol && this.config.dataCode) {
        const colNameList = this.lr_dataSourceCol[this.config.dataCode] || [];
        return colNameList.map((t) => {
          return { value: t, label: t };
        });
      } else {
        return [];
      }
    },
  },
  created() {
    if (this.config.dataCode) {
      this.lr_loadDataSourceColNames(this.config.dataCode);
    }
  },
  methods: {
    handleDataSourceChange() {
      this.config.YKey = "";
      this.config.XKey = "";
      if (!this.$validatenull(this.config.dataCode)) {
        this.lr_loadDataSourceData(this.config.dataCode);
        this.lr_loadDataSourceColNames(this.config.dataCode);
      }
    },
  },
};
</script>

